<template>
    <div class="card">
        <div class="card-header" v-if="title">
            <div class="title">
                <!--可以使用插槽自定义左侧标题样式也可以是字符串-->
                <slot name="title">
                    {{title}}
                </slot>
            </div>
            <div class="more">
                <!--可以使用插槽自定义右侧显示样式也可以是字符串-->
                <slot name="more">{{more}}</slot>
            </div>
        </div>
        <div class="card-wrap">
            <!--卡片内容-->
            <slot name="content"></slot>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Prop, Vue, Watch} from "vue-property-decorator";

    @Component({})
    //圆角卡片
    export default class FilletCard extends Vue {
        //卡片标题，为空时则隐藏标题栏
        @Prop({default: "", type: String})
        public title !: string;
        //右侧显示内容
        @Prop({default: "查看更多", type: String})
        public more!: string;

    }
</script>

<style scoped lang="stylus">
    .card
        margin 0 12px 12px 12px;
        background #fff;
        border-radius 12px;
        overflow hidden;

    .card-header
        position relative;
        display flex;
        justify-content space-between;
        box-sizing border-box;
        padding 0 11px;
        height 38px;
        border-bottom .5px solid #eeeee7;
        line-height 38px;

        .title
            color #333;
            font-size 14px;
            font-weight bold;

        .more
            height 38px;
            color #999;
            font-size 12px;
            font-weight 300


</style>
